<template>
	<div>
		<div id="all">
			<el-input size="mini" v-model="input" placeholder="请输入优惠券标题" clearable style="width: 320px;"
				@clear="coupon()">
			</el-input>
			<el-select size="mini" v-model="value1" placeholder="请选择优惠券类型" style="width: 320px;margin-left: 3px;"
				clearable @click="coupon()">
				<el-option v-for="item in val1" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-select size="mini" v-model="value2" placeholder="请选择优惠券状态" style="width: 320px;margin-left: 3px;"
				clearable @click="coupon()">
				<el-option v-for="item in val2" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			</el-input>
			<el-button size="mini" type="primary" icon="el-icon-search" class="search" @click="coupon()">查找
			</el-button>
			<el-button size="mini" type="primary" icon="el-icon-edit" @click="dialogFormVisible = true">添加
			</el-button>
			<!-- //导出 -->
			<div class="home">
				<download-excel class="export-excel-wrapper" :data="tableData" :fields="json_fields" type="xls"
					worksheet="My Worksheet" name="优惠券管理">
					<el-button size="mini" type="primary" icon="el-icon-download">导出</el-button>
				</download-excel>
			</div>
		</div>

		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="id" label="优惠券ID">
			</el-table-column>
			<el-table-column prop="name" label="优惠券名称">
			</el-table-column>
			<el-table-column prop="desc" label="介绍">
			</el-table-column>
			<el-table-column prop="tag" label="标签">
			</el-table-column>
			<el-table-column prop="min" label="最低消费">
				<template slot-scope="scope">
					<span>满{{scope.row.min}}元可用</span>
				</template>
			</el-table-column>
			<el-table-column prop="discount" label="满减金额">
				<template slot-scope="scope">
					<span>满减{{scope.row.discount}}元</span>
				</template>
			</el-table-column>
			<el-table-column prop="limit" label="每人限额">
			</el-table-column>
			<el-table-column prop="goodsType" label="商品使用范围">
				<template slot-scope="scope">
					<span v-if="scope.row.goodsType==0">全场满减</span>
					<span v-if="scope.row.goodsType==1">指定分类</span>
					<span v-if="scope.row.goodsType==2">指定商品</span>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="优惠券类型">
				<template slot-scope="scope">
					<span v-if="scope.row.type==0">通用领券</span>
					<span v-if="scope.row.type==1">注册赠券</span>
					<span v-if="scope.row.type==2">兑换码</span>
				</template>
			</el-table-column>
			<el-table-column prop="total" label="优惠券数量">
				<template slot-scope="scope">
					<span v-if="scope.row.total==0">不限</span>
					<span v-else>{{scope.row.total}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态">
				<template slot-scope="scope">
					<span v-if="scope.row.status==0">正常</span>
					<span v-if="scope.row.status==1">已过期</span>
					<span v-if="scope.row.status==2">已下架</span>
				</template>
			</el-table-column>
			<el-table-column prop="operation" label="操作" width="250">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click="details(scope.$index, scope.row)">详情</el-button>
					<el-button size="mini" type="info" @click="handleEdit(scope.$index, scope.row)">编辑
					</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- //分页 -->
		<div>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="ljq.page" :page-sizes="[5, 10, 15, 20]" :page-size="ljq.num"
				layout="total, sizes, prev, pager, next, jumper" :total="ljq.total">
			</el-pagination>
		</div>




		<!-- //弹框 添加 -->
		<el-dialog title="创建" :visible.sync="dialogFormVisible">
			<el-form :model="form" label-position='left' ref="formm" :rules="rules" >
				<el-form-item label="优惠券名称" :label-width="formLabelWidth" prop="name">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="介绍" :label-width="formLabelWidth">
					<el-input v-model="form.desc" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="标签" :label-width="formLabelWidth">
					<el-input v-model="form.tag" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="最低消费" :label-width="formLabelWidth">
					<el-input v-model="form.min" autocomplete="off">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="满减金额" :label-width="formLabelWidth">
					<el-input v-model="form.discount" autocomplete="off">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="每人限领" :label-width="formLabelWidth">
					<el-input v-model="form.limit" autocomplete="off">
						<template slot="append">张</template>
					</el-input>
				</el-form-item>
				<el-form-item label="分发类型" :label-width="formLabelWidth">
					<el-select v-model="form.type" placeholder="请选择">
						<el-option v-for="item in classification" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="优惠券数量" :label-width="formLabelWidth">
					<el-input v-model="form.total">
						<template slot="append">张</template>
					</el-input>
				</el-form-item>
				<el-form-item label="有效期" :label-width="formLabelWidth">
					<div style="margin-bottom: 15px;">
						<el-radio-group v-model="form.timeType" @change="restd">
							<el-radio-button label="领劵相对天数"></el-radio-button>
							<el-radio-button label="指定绝对时间"></el-radio-button>
						</el-radio-group>
					</div>
					<div v-if="form.timeType == '指定绝对时间'">
						<span>
							<el-date-picker style="width: 48%;" v-model="form.startTime" type="datetime"
								placeholder="选择日期时间">
							</el-date-picker>
						</span>
						<span>至</span>
						<span>
							<el-date-picker style="width: 48%;" v-model="form.endTime" type="datetime"
								placeholder="选择日期时间">
							</el-date-picker>
						</span>
					</div>
					<el-input autocomplete="off" v-else v-model="form.days">
						<template slot="append">天</template>
					</el-input>
				</el-form-item>
				<el-form-item label="商品限制范围" :label-width="formLabelWidth">
					<el-radio-group v-model="form.goodsType" placeholder="请选择" @change="reades">
						<el-radio-button label="全场通用"></el-radio-button>
						<el-radio-button label="指定分类"></el-radio-button>
						<el-radio-button label="指定商品"></el-radio-button>
					</el-radio-group>
					<div>
						<span v-if="form.goodsType != '全场通用' ">目前不支持</span>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialog()">取 消</el-button>
				<el-button type="primary" @click="addTo()">确 定</el-button>
			</div>
		</el-dialog>


		<!-- //弹框 编辑 -->
		<el-dialog title="编辑" :visible.sync="dialogFormVisibles">
			<el-form :model="formEdit" :rules="rules" label-position='left' ref="forms">
				<el-form-item label="优惠券名称" :label-width="formLabelWidth" prop="name">
					<el-input v-model="formEdit.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="介绍" :label-width="formLabelWidth">
					<el-input v-model="formEdit.desc" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="标签" :label-width="formLabelWidth">
					<el-input v-model="formEdit.tag" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="最低消费" :label-width="formLabelWidth">
					<el-input v-model="formEdit.min" autocomplete="off">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="满减金额" :label-width="formLabelWidth">
					<el-input v-model="formEdit.discount" autocomplete="off">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="每人限领" :label-width="formLabelWidth">
					<el-input v-model="formEdit.limit" autocomplete="off">
						<template slot="append">张</template>
					</el-input>
				</el-form-item>
				<el-form-item label="分发类型" :label-width="formLabelWidth">
					<el-select v-model="formEdit.type" placeholder="请选择">
						<el-option v-for="item in classification" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="优惠券数量" :label-width="formLabelWidth">
					<el-input v-model="formEdit.total">
						<template slot="append">张</template>
					</el-input>
				</el-form-item>
				<el-form-item label="有效期" :label-width="formLabelWidth">
					<div style="margin-bottom: 15px;">
						<el-radio-group v-model="formEdit.timeType" @change="restd">
							<el-radio-button label="领劵相对天数"></el-radio-button>
							<el-radio-button label="指定绝对时间"></el-radio-button>
						</el-radio-group>
					</div>
					<div v-if="formEdit.timeType == '指定绝对时间'">
						<span>
							<el-date-picker style="width: 48%;" v-model="formEdit.startTime" type="datetime"
								placeholder="选择日期时间">
							</el-date-picker>
						</span>
						<span>至</span>
						<span>
							<el-date-picker style="width: 48%;" v-model="formEdit.endTime" type="datetime"
								placeholder="选择日期时间">
							</el-date-picker>
						</span>
					</div>
					<el-input autocomplete="off" v-else v-model="formEdit.days">
						<template slot="append">天</template>
					</el-input>
				</el-form-item>
				<el-form-item label="商品限制范围" :label-width="formLabelWidth">
					<el-radio-group v-model="formEdit.goodsType" placeholder="请选择" @change="reades">
						<el-radio-button :label="formEdit.godsType">全场通用</el-radio-button>
						<el-radio-button :label="formEdit.gdsType">指定分类</el-radio-button>
						<el-radio-button :label="formEdit.gsType">指定商品</el-radio-button>
					</el-radio-group>
					<div>
						<span v-if="formEdit.goodsType != 0 ">目前不支持</span>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dial()">取 消</el-button>
				<el-button type="primary" @click="edit()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import Cookie from 'js-cookie'
	import {
		couponList,
		couponDelete,
		couponCreate,
		couponUpdate
	} from '../../utils/axios.js'
	export default {
		data() {
			return {

				//导出
				json_fields: {
					优惠券ID: "id", //常规字段
					名称: "name", //支持嵌套属性
					内容: "desc", //支持嵌套属性
					标签: "tag",//支持嵌套属性
					最低消费: "min", //支持嵌套属性
					减免金额: "discount", //支持嵌套属性
					每人限领: "limit", //支持嵌套属性
					优惠券数量: "total", //支持嵌套属性
				},


				//不能为空
				rules: {
					name: [{
						required: true, //必填
						message: "优惠券标题不能为空",
						trigger: 'blur' //离开
					}],
				},


				//弹框
				dialogTableVisible: false,
				dialogFormVisible: false,
				goodsValue: [],
				num: 0,
				nums: 0,
				form: {
					name: '', //优惠券名称
					desc: '', //介绍
					tag: '', //标签
					min: '0', //最低消费
					discount: '0', //满减金额
					limit: 1, //每人限领
					total: '0', //优惠券数量
					days: 0, //天
					startTime: '', //选择日期时间结束
					endTime: '', //选择日期时间开始
					type: 0, //分发类型
					goodsType: '全场通用', //商品限制范围
					timeType: '领劵相对天数', //有效期
					// status:''
				},
				formLabelWidth: '100px',

				dialogTableVisibles: false,
				dialogFormVisibles: false,
				formEdit: {
					name: '', //优惠券名称
					desc: '', //介绍
					tag: '', //标签
					min: '0', //最低消费
					discount: '0', //满减金额
					limit: 1, //每人限领
					total: '0', //优惠券数量
					days: 0, //天
					startTime: '', //选择日期时间结束
					endTime: '', //选择日期时间开始
					type: 0, //分发类型
					goodsType: 0, //商品限制范围
					timeType: '领劵相对天数', //有效期
					// status:''
					id: '',
					godsType:0,
					gdsType:1,
					gsType:2
				},

				// 弹框分发类型
				classification: [{
						label: "通用领券",
						value: 0
					},
					{
						label: "注册赠券",
						value: 1
					},
					{
						label: "兑换码",
						value: 2
					}
				],


				//分页
				ljq: {
					page: 1, //默认前往几页
					num: 20, //默认一页几条
					total: 0 //共几条
				},

				//头部
				input: '',
				value1: '',
				value2: '',
				val1: [{
						label: "通用领券",
						value: 0
					},
					{
						label: "注册赠券",
						value: 1
					},
					{
						label: "兑换码",
						value: 2
					}
				],
				val2: [{
						label: "正常",
						value: 0
					},
					{
						label: "已过期",
						value: 1
					},
					{
						label: "已下架",
						value: 2
					}
				],


				tableData: []
			}
		},
		created() {
			this.coupon()
		},
		methods: {

			//刷新
			refresh() {
				this.$router.push({
					path: '/SkipBlank',
					query: {
						path: this.$route.path
					}
				})
			},


			//列表渲染
			coupon() {
				couponList(this.ljq.page, this.ljq.num, this.input, this.value1, this.value2).then(res => {
					// console.log(res);
					this.tableData = res.data.data.list
					this.ljq.total = res.data.data.total
				})
			},


			//转换为数字
			reades() {
				// console.log(this.form.goodsType);
				if (this.form.goodsType == '全场通用' || this.formEdit.godsType == 0) {
					this.num = 0
				}
				if (this.form.goodsType == '指定分类' || this.formEdit.gdsType == 0) {
					this.num = 1
				}
				if (this.form.goodsType == '指定商品' || this.formEdit.gsType == 0) {
					this.num = 2
				}
				// console.log(this.num);
			},
			//转换为数字
			restd() {
				// console.log(this.form.timeType);
				if (this.form.timeType == '领劵相对天数' || this.formEdit.timeType == '领劵相对天数') {
					this.nums = 0
				}
				if (this.form.timeType == '指定绝对时间' || this.formEdit.timeType == '指定绝对时间') {
					this.nums = 1
				}
				// console.log(this.nums);
			},
			//分页
			handleSizeChange(new_num) {
				// console.log(newnum)
				this.ljq.num = new_num
				this.coupon()
			},
			handleCurrentChange(new_page) {
				this.ljq.page = new_page
				this.coupon()
			},


			//编辑
			edit() {
				// console.log(this.tableData.goodsType);
				let data = {
					id: this.formEdit.id,
					name: this.formEdit.name,
					desc: this.formEdit.desc,
					discount: this.formEdit.discount,
					min: this.formEdit.min,
					limit: this.formEdit.limit,
					type: this.formEdit.type,
					status: this.value2,
					goodsType: this.num,
					goodsValue: this.goodsValue,
					timeType: this.nums,
					total: this.formEdit.total,
					tag : this.formEdit.tag
				}
				this.$refs.forms.validate((valid) => {
					if (valid) {
						couponUpdate(data).then(res => {
							// console.log(12312313213)
							// console.log(res)
							this.$notify({
								title: '成功',
								message: '更新成功',
								type: 'success'
							});

							this.dialogFormVisibles = false,
								this.refresh() //刷新
						})
					}
				});
			},
			//取消编辑
			dialog() {
				this.$message('已取消编辑');
				this.dialogFormVisibles = false
				this.refresh() //刷新
			},
			
			//点击打开编辑弹框
			handleEdit(index, row) {
				// console.log(index, row);
				this.dialogFormVisibles = true
				this.formEdit.id = row.id
				this.formEdit.name = row.name
				this.formEdit.desc = row.desc
				this.formEdit.discount = row.discount
				this.formEdit.min = row.min
				this.formEdit.limit = row.limit
				this.formEdit.type = row.type
				this.value2 = row.status
				this.formEdit.goodsType = row.goodsType
				this.goodsValue = row.goodsValue
				this.nums = row.timeType
				this.formEdit.total = row.total
				this.formEdit.tag = row.tag
			},



			//删除
			handleDelete(index, row) {
				// console.log(index, row);
				this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					couponDelete(row).then(res => {
						this.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success'
						});
						this.coupon() //删除后重新渲染
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},



			//跳转详情页面
			details(index,row){
				Cookie.set("id",row.id)
				this.$router.push('/Index/CouponDetails')
			},

			//添加
			addTo() {
				let data = {
					name: this.form.name,
					desc: this.form.desc,
					tag: this.form.tag,
					total: this.form.total,
					discount: this.form.discount,
					min: this.form.min,
					limit: this.form.limit,
					type: this.form.type,
					status: this.value2,
					goodsType: this.num,
					goodsValue: this.goodsValue,
					timeType: this.nums
				}
				this.$refs.formm.validate((valid) => {
					if (valid) {
						couponCreate(data).then(res => {
							this.$notify({
								title: '成功',
								message: '添加管理员成功',
								type: 'success',
							});

							this.dialogFormVisible = false,
								this.refresh() //刷新
						})
					} else {
						console.log('失败');
						return false;
					}
				});
			},
			//取消添加
			dialog() {
				this.$message('已取消添加');
				this.dialogFormVisible = false
				this.refresh() //刷新
			},
		}
	}
</script>

<style lang="less" scoped="scoped">
	/* //字体居中 */
	/deep/.cell {
		text-align: center;
	}


	.active {
		background-color: #409EFF;
	}

	/* //头部搜索 */
	#all {
		display: flex;
		width: 40% !important;
		margin-bottom: 10px;
	}

	.search {
		margin-left: 3px !important;
	}


	#all .el-input .el-input__inner {
		background-color: #FFFFFF !important;
		caret-color: #434343 !important;
		color: #999999 !important;
		border: 1px solid #b9b9b9 !important;
	}

	/* //导出 */
	.home {
		height: 100%;
		background-color: rgb(128, 126, 126);
		border-radius: 6px;
		margin-left: 10px;
	}

	//添加弹框
	.el-form {
		width: 57% !important;
		margin-left: 50px !important;
		font-weight: 800;
	}

	/deep/.el-form-item {
		text-align: left;
	}
</style>
